<template>
  <!--  归档-->
  <div class="periphery" :style="'background-color:'+theme.secondaryBackground">
    <p style="margin-bottom: 5%" :style="'color:'+theme.numberOneTextColor">
      当前一共有 <span class="h1" style="font-size: 30px;margin-bottom: 5%">{{num}}</span>
      篇文章,其中水了{{num-2}}篇😆
    </p>
    <!--    文章发布的时间线-->
    <router-link style="" class="article_item" v-for="item in pig_list" :to="{
       path: '/theArticleDetails',
       query: {aid: item.aid}}" :style="'color:'+theme.numberOneTextColor">
      <el-row align="middle" type="flex">
        <el-col :xs="6" :sm="3">
          <p>{{item.time.substr(0,10)}}</p>
        </el-col>
        <el-col :xs="18" :sm="19">
          <span style="font-size: 20px">{{item.title}}</span>
          <div style="float: right">
            <el-tag type="info" class="hidden-sm-and-down" v-for="item1 in item.labelList">
              {{item1}}
            </el-tag>
          </div>
        </el-col>
      </el-row>
      <div
        style="margin-right: 5%">
        <el-divider></el-divider>
      </div>
    </router-link>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        num: "",
        pig_list: [],


        theme: {}
      }
    },
    created() {
      let that = this;

      //初始化系统
      that.theme = that.$store.getters.getTheme;

      that.$http.get(that.PIGEONHOLE_API + "/number_of_articles").then(function (result) {
        that.num = result.data;
      });

      that.$http.get(that.PIGEONHOLE_API + "/list").then(function (result) {
        that.pig_list = result.data.result;
      });
    },
    methods: {}

  }
</script>


<style scoped>

  .periphery {
    height: 100%;
    margin-top: 0;
    padding: 20px 20px 20px 10%;
  }

  .article_item:hover {
    color: #000000;
  }

  .article_item {
    padding-top: 20px;
  }

</style>
